<template>
    <!--    计算属性computed-->
    <!--    computed 只读改变值，不能设置值，如果想设置需要set  get-->
    <div class="2computed">
        {{num}},{{double}}
    </div>
</template>

<script>
    // import {ref, computed} from 'vue';
    // import {toRefs, computed, reactive} from 'vue';
    import {ref, computed} from 'vue';

    export default {
        name: '2computed',
        setup() {
            // const num = ref(1);
            // const double = computed(() => num.value * 2);
            // setTimeout(() => {
            //     num.value++;
            // }, 1000);
            // return {
            //     num, double
            // }
            // 使用reactive
            // const state = reactive({
            //     num: 1,
            //     double:computed(()=>state.num*2)
            // });
            // setTimeout(() => {
            //     state.num++;
            // }, 1000);
            // return toRefs(state);

            // 想用computed进行修改值
            const num = ref(1);
            const double = computed({
                get: () => num.value + 1,
                set: (val) => num.value = val - 1
            });
            double.value = 3;  //改变computed赋值的方法 需要用set get
            console.log(num.value);
            // setTimeout(() => {
            //     state.num++;
            // }, 1000);
            return {
                double, num
            };
        }
    };
</script>

<style scoped>

</style>
